<script setup>
const props = defineProps({
  modelValue: {
    required: true
  },
  field: {
    type: String,
    required: true
  },
  label: {
    type: String,
    required: true
  },
  rules: {
    type: Array,
    default: () => []
  },
  type: {
    type: String,
    default: 'date' // 或 'daterange'
  },
  placeholder: String,
  startPlaceholder: String,
  endPlaceholder: String,
  format: String,
  valueFormat: String,
  disabled: Boolean,
  clearable: {
    type: Boolean,
    default: true
  }
})

const emit = defineEmits(['update:modelValue'])
</script>

<template>
  <el-form-item :label="label" :rules="rules" :prop="field">
    <el-date-picker
        :model-value="modelValue"
        @update:modelValue="emit('update:modelValue', $event)"
        :type="type"
        :placeholder="placeholder"
        :start-placeholder="startPlaceholder"
        :end-placeholder="endPlaceholder"
        :format="format"
        :value-format="valueFormat"
        :disabled="disabled"
        :clearable="clearable"
    />
  </el-form-item>
</template>
